<script setup>
import * as echarts from 'echarts';
import {
  depList, charts, indicators, largeScreenList
} from "@/api/index";
const { proxy } = getCurrentInstance();
import PickDate from '@/components/PickDate'
import {
  format,
  endOfMonth,
  endOfYear,
  startOfMonth,
  startOfYear,
  subMonths,
  addDays,
  startOfWeek,
  endOfWeek,
  addHours,
  addMinutes,
  addSeconds
} from 'date-fns'
import { useRouter, useRoute } from 'vue-router';
// 初始化路由
const router = useRouter();
const route = useRoute();
// const items = Array.from({ length: 6 }, (_, i) => ({ id: i, title: `列表标题 ${i + 1}` }));
const currentIndex = ref(0); // 当前滚动到的索引
let intervalId;
let intervalTime;
const yearValue = ref(new Date().getFullYear())
const monthValue = ref(
  new Date().getFullYear() + '-' + new Date().getMonth()
)
const selectedTitle = ref('全院'); // 选中项的值
const options = { weekStartsOn: 1 }
const showSearch = ref(false)
const dateValue = ref(format(new Date(), 'yyyy-MM-dd'))
const weekValue = ref([startOfWeek(new Date(), options), endOfWeek(new Date(), options)])
const scrollItems = () => {
  currentIndex.value = (currentIndex.value + 1) % listArray.value.length;
  if (currentIndex.value === 0) {
    // 快速重置，避免过渡效果
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        document.querySelector('.scrow-container').style.transition = 'none';
        document.querySelector('.scrow-container').style.transform = `translateY(0)`;
        setTimeout(() => {
          document.querySelector('.scrow-container').style.transition = ''; // 恢复过渡效果
        }, 0);
      });
    });
  }
};
// 启动定时器
const startScrolling = () => {
  // 确保先清除之前的定时器
  if (intervalId) {
    clearInterval(intervalId);
  }
  // 设置新的定时器
  intervalId = setInterval(scrollItems, 3000);
};
// 清除定时器
const stopScrolling = () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
};
const data = reactive({
  arrayList: [],
  depId: '0',
  dataName: [],
  chartsList: { chartsList_1: [], chartsList_2: {}, chartsList_3: {}, chartsList_4: {}, chartsList_5: {}, chartsList_6: {} },
  indicatorsList: [],
  colName: [],
  listArray: [],
  chartsList_1: [],
  chartsList_2: [],
  chartsList_3: [],
  chartsList_4: [],
  chartsList_5: [],
  chartsList_6: []
})
const { arrayList, depId, dataName, chartsList, indicatorsList, colName, listArray, chartsList_1, chartsList_2, chartsList_3, chartsList_4, chartsList_5, chartsList_6 } = toRefs(data);
const type = ref('D')
const showDay = ref(false)
const textCon = ref('全院')
const dayArray = ref([{ title: '按天', checked: true, type: 'D' },
// { title: '按周', checked: false, type: 'W' },
{ title: '按月', checked: false, type: 'M' }, { title: '按年', checked: false, type: 'Y' }])
const getDepList = async () => {
  try {
    const res = await depList();
    // 使用 map 处理数组数据
    arrayList.value = res.data.map(item => ({
      ...item,
      checked: item.depId === '0' // 只将全院(depId为0)设置为选中
    }));
    // 初始化选中的科室信息
    const defaultDep = arrayList.value[0];
    textCon.value = defaultDep.depName;
    selectedTitle.value = defaultDep.depName;
    depId.value = defaultDep.depId;
  } catch (error) {
  }
}
const getCharts = async () => {
  try {
    const data = { dateType: type.value, depId: depId.value }
    if (type.value === 'Y') {
      data.bgnDate = yearValue.value
    } else if (type.value === 'M') {
      data.bgnDate = monthValue.value
    } else if (type.value === 'W') {
      data.bgnDate = proxy.$h.formatTime(weekValue.value[0])
    } else {
      data.bgnDate = dateValue.value
    }
    const res = await charts(data);
    dataName.value = res.dataName
    const rawData = res.data
    // 获取所有数据项的键（除了 statDate）
    const dataKeys = Object.keys(rawData[0]).filter(key => key !== 'statDate');
    // 构建新数据结构
    const transformedData = dataKeys.reduce((acc, key) => {
      acc[key] = {
        statDate: rawData.map(item => item.statDate),
        data: rawData.map(item => item[key])
      };
      return acc;
    }, {});
    chartsList.value = transformedData
    initCharts();
  } catch (error) {
  }
}
const getIndicators = async () => {
  try {
    const data = { dateType: type.value, depId: depId.value }
    if (type.value === 'Y') {
      data.bgnDate = yearValue.value
    } else if (type.value === 'M') {
      data.bgnDate = monthValue.value
    } else if (type.value === 'W') {
      data.bgnDate = proxy.$h.formatTime(weekValue.value[0])
    } else {
      data.bgnDate = dateValue.value
    }
    const res = await indicators(data);
    indicatorsList.value = res.data
  } catch (error) {
  }
}
const getlargeScreenList = async () => {
  try {
    const data = { dateType: type.value, depId: depId.value }
    if (type.value === 'Y') {
      data.bgnDate = yearValue.value
    } else if (type.value === 'M') {
      data.bgnDate = monthValue.value
    } else if (type.value === 'W') {
      data.bgnDate = proxy.$h.formatTime(weekValue.value[0])
    } else {
      data.bgnDate = dateValue.value
    }
    const res = await largeScreenList(data);
    const rawData=res.data
    colName.value = res.colName
    const dataKeys = Object.keys(rawData[0]).filter(key => key !== 'statDate');
    // 构建新数据结构
    const transformedData = dataKeys.reduce((acc, key) => {
      acc[key] = {
        statDate: rawData.map(item => item.statDate),
        data: rawData.map(item => item[key])
      };
      return acc;
    }, {});
    listArray.value = proxy.$h.transformData(res.data)
    startScrolling()
  } catch (error) {
  }
}
// 提取公共逻辑到一个函数中
async function fetchData() {
  try {
    await Promise.all([getCharts(), getIndicators(), getlargeScreenList()]);
  } catch (error) {
  }
}
function setupWatchers() {
  [yearValue, dateValue, monthValue, weekValue].forEach((value) =>
    watch(value, fetchData, { immediate: value === dateValue })
  );
}
setupWatchers()
const initCharts = () => {
  // 创建数据类型和图表ID的映射
  const chartMapping = [
    { chartId: 'main-1', dataType: 'data1' },
    { chartId: 'main-2', dataType: 'data2' },
    { chartId: 'main-3', dataType: 'data3' },
    { chartId: 'main-4', dataType: 'data4' },
    { chartId: 'main-5', dataType: 'data5' },
    { chartId: 'main-6', dataType: 'data6' }
  ];
  
  if (!chartsList.value || typeof chartsList.value !== 'object') {
    console.error('chartsList.value is invalid:', chartsList.value);
    return;
  }

  // 遍历映射关系初始化图表
  chartMapping.forEach(({ chartId, dataType }) => {
    if (chartsList.value[dataType]) {
      console.log('Processing chart:', chartId, 'with dataType:', dataType);
      echartsInit(chartId, chartsList.value[dataType], dataType);
    } else {
      console.warn(`No data found for ${dataType} in chart ${chartId}`);
    }
  });
};

// 修改 echartsInit 方法，添加错误处理
const echartsInit = (chartId, chartData, dataType) => {
  const chartDom = document.getElementById(chartId);
  if (!chartDom) {
    console.error(`Chart element ${chartId} not found`);
    return;
  }

  try {
    const myChart = echarts.init(chartDom);
    
    const seriesData = dataType === 'data6' 
      ? chartData.data.map(val => parseFloat(val) || 0)
      : chartData.data;

    const option = {
      grid: {
        top: 30,      
        left: 35,     
        right: 20,    
        bottom: 30,   
        containLabel: true
      },
      title: {
        text: '',
        textStyle: {
          fontSize: 14,
          color: '#f2f2f2',
        }
      },
      legend: {
        show: false,  // 隐藏图例以节省空间
        data: [dataType]
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          var result = params[0].name + '<br/>';
          if (dataType === 'data6') {
            params.forEach(function (param) {
              result += param.value + '%';
            });
          } else {
            params.forEach(function (param) {
              result += param.value;
            });
          }
          return result;
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: chartData.statDate || [],
        axisLabel: {
          interval: 0,  // 显示所有标签
          rotate: 0,    // 不旋转标签
          textStyle: {
            fontSize: 12,
            color: '#f2f2f2'
          },
          width: 80,    // 限制标签宽度
          overflow: 'truncate'  // 超出部分显示省略号
        }
      },
      yAxis: {
        type: 'value',
        name: dataType === 'data6' ? '利用率(%)' : '人数',
        min: dataType === 'data6' ? 0 : null,
        max: dataType === 'data6' ? 100 : null,
        interval: dataType === 'data6' ? 20 : null,
        axisLabel: {
          show: true,
          formatter: dataType === 'data6' ? '{value}%' : '{value}',
          textStyle: {
            color: '#f2f2f2'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.1)'
          }
        }
      },
      dataZoom: [
        {
          type: 'slider',  
          show: true,
          xAxisIndex: [0],
          start: 50,    // 开始位置设为50%
          end: 100,     // 结束位置设为100%，即显示后半部分数据
          height: 15,   
          bottom: 5,    
          showDetail: false,
          textStyle: {     
            show: false    
          }
        }
      ],
      series: [
        {
          data: seriesData,
          type: 'line',
          smooth: true,  // 添加平滑曲线
          symbol: 'circle',  // 数据点样式
          symbolSize: 6,    // 数据点大小
          lineStyle: {
            width: 2       // 线条宽度
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 1, color: 'rgba(128, 255, 0, .5)' },
                { offset: 0, color: 'rgba(5, 255, 0, 0)' }
              ],
              false
            ),
            shadowBlur: 10
          }
        }
      ]
    };

    myChart.setOption(option);
    
    // 优化resize处理
    const resizeHandler = () => {
      myChart.resize({
        animation: {
          duration: 300
        }
      });
    };
    
    window.addEventListener('resize', resizeHandler);
    
    // 组件卸载时清理事件监听
    return () => {
      window.removeEventListener('resize', resizeHandler);
      myChart.dispose();
    };
    
  } catch (error) {
    console.error('Failed to initialize chart:', error);
  }
};
const getChartData = (index) => {
  // 根据索引返回不同的数据集
  const defaultData = [820, 932, 901, 934, 1290, 1330, 1320];
  switch (index) {
    case 0:
      return defaultData; // 住院人数的数据
    case 1:
      return [700, 750, 800, 850, 900, 950, 1000]; // 预住院人数的数据
    case 2:
      return [600, 650, 700, 750, 800, 850, 900]; // 等床人数的数据
    case 3:
      return [600, 650, 700, 750, 800, 850, 900];
    case 4:
      return [600, 650, 700, 750, 800, 850, 900];
    case 5:
      return [600, 650, 700, 750, 800, 850, 900];
    default:
      return defaultData;
  }
};
// 计算属性：根据输入框内容过滤数组
const filteredArray = computed(() => {
  if (!textCon.value) return arrayList.value;
  const filterText = textCon.value.toLowerCase().trim();
  return arrayList.value.filter(item =>
    item.depName.toLowerCase().includes(filterText)
  );
});
const handleCheck = (index) => {
  dayArray.value.forEach(item => {
    item.checked = false
  })
  dayArray.value[index].checked = true
  type.value = dayArray.value[index].type
  showDay.value = false
  getCharts()
  getIndicators()
  getlargeScreenList()
}
const handleCheckSearch = (index) => {
  // 使用 filteredArray 中的选中项
  const selectedDep = filteredArray.value[index];
  // // 使用 map 更新原数组中的选中状态
  arrayList.value.forEach(item => {
    if (selectedDep.depId === item.depId) {
      item.checked = true
    } else {
      item.checked = false
    }
  })
  showSearch.value = false
  selectedTitle.value = selectedDep.depName; // 更新选中项的值
  textCon.value = selectedDep.depName
  depId.value = selectedDep.depId
  getCharts()
  getIndicators()
  getlargeScreenList()
}
const handleCheckBlur = () => {
  showSearch.value = !showSearch.value
}
const time = computed(() => {
  if (type.value === 'Y') {
    return yearValue.value
  } else if (type.value === 'M') {
    console.log(monthValue.value, 'monthValue.value')
    return monthValue.value
  } else if (type.value === 'D') {
    return dateValue.value
  } else {
    return proxy.$h.formatTime(weekValue.value[0]) + '至' + proxy.$h.formatTime(weekValue.value[1])
  }
});
const getTransformStyle = () => {
  const itemHeight = 50; // 假设每个项目的高度为50px，根据实际情况调整
  const translateY = -currentIndex.value * itemHeight;
  return {
    transform: `translateY(${translateY}px)`,
  };
};
onMounted(async () => {
  await nextTick();
  let time = 30
  if (route.query.timer) {
    time = route.query.timer
  }
  getDepList()
  intervalTime = setInterval(fetchData, time * 1000); // 每 30 秒调用一次 fetchData
})
onUnmounted(() => {
  clearInterval(intervalTime);// 清��定时器，防止内存泄漏
  stopScrolling()
})
</script>

<template>
  <div class="page">
    <div class="title">
      <img src="@/assets/images/BGC.png" mode="scaleToFill" class="top-img" />
      <div class="title-flex flex">
        <div class="flex-top-btn" @click="showDay = !showDay">{{ type === 'D' ? '按天' : (type === 'M' ? '按月' : '按年') }}
        </div>
        <pick-date placeholder="请选择日期" v-model="monthValue" mode="month" format="yyyy-MM" :width="120"
          v-if="type === 'M'" />
        <pick-date placeholder="请选择日期" v-model="yearValue" mode="year" format="yyyy" :width="120"
          v-else-if="type === 'Y'" />
        <pick-date placeholder="请选择日期" v-model="dateValue" format="yyyy-MM-dd" :width="120" v-else-if="type === 'D'" />
        <pick-date placeholder="请选择日期" v-model="weekValue" mode="week" format="yyyy年 第ww周" v-else />
        <div class="flex-top-btn btn1">
          <input type="text" placeholder="点击输入搜索" v-model="textCon" @click="handleCheckBlur" />
        </div>
      </div>
      <div class="day-box" v-if="showDay" :style="{ 'right': type === 'W' ? '436px' : '346px' }">
        <div :class="['day-item', item.checked ? 'active' : '']" v-for="(item, index) in dayArray" :key="index"
          @click="handleCheck(index)">
          {{ item.title }}
        </div>
      </div>
      <div class="day-box search" v-if="showSearch">
        <div :class="['day-item', item.checked ? 'active' : '']" v-for="(item, index) in filteredArray"
          :key="item.depId" @click="handleCheckSearch(index)">
          {{ item.depName }}
        </div>
      </div>
    </div>
    <div class="page-box flex">
      <div class="flex-col">
        <div class="flex-item">
          <div class="flex-top">
            <div class="top-box flex">
              <div class="flex-top-1">{{ dataName[0] || '住院人数' }}</div>
              <div class="flex-1 flex">
                {{ time }}
              </div>
            </div>
          </div>
          <div class="flex-con flex">
            {{ selectedTitle }}
          </div>
          <div :id="'main-' + 1" class="main"></div>
        </div>
        <div class="flex-item" style="margin-top: 11px;">
          <div class="flex-top flex">
            <div class="top-box flex">
              <div class="flex-top-1">{{ dataName[1] || '预住院人数' }}</div>
              <div class="flex-1 flex">
                {{ time }}
              </div>
            </div>
          </div>
          <div class="flex-con flex">
            {{ selectedTitle }}
          </div>
          <div :id="'main-' + 2" class="main"></div>
        </div>
        <div class="flex-item" style="margin-top: 11px;">
          <div class="flex-top flex">
            <div class="top-box flex">
              <div class="flex-top-1">{{ dataName[2] || '等床人数' }}</div>
              <div class="flex-1 flex">
                {{ time }}
              </div>
            </div>
          </div>
          <div class="flex-con flex">
            {{ selectedTitle }}
          </div>
          <div :id="'main-' + 3" class="main"></div>
        </div>
      </div>
      <div class="flex-center">
        <div class="center-title">
          <span>{{ selectedTitle }} {{ time }}</span>
        </div>
        <div class="center-box flex">
          <img src="@/assets/images/theEarth.png" alt="" class="cir" />
          <div class="cir-1 flex">
            {{ indicatorsList[0]?.indicator }}
            <div class="cir-num">{{ indicatorsList[0]?.data }}</div>
          </div>
          <div class="cir-1 flex cir-2">
            {{ indicatorsList[1]?.indicator }}
            <div class="cir-num">{{ indicatorsList[1]?.data }}</div>
          </div>
          <div class="cir-1 flex cir-3">
            {{ indicatorsList[2]?.indicator }}
            <div class="cir-num">{{ indicatorsList[2]?.data }}</div>
          </div>
          <div class="cir-1 flex cir-4">
            {{ indicatorsList[3]?.indicator }}
            <div class="cir-num"> {{ indicatorsList[3]?.data }}</div>
          </div>
          <div class="cir-1 flex cir-5">
            {{ indicatorsList[4]?.indicator }}
            <div class="cir-num"> {{ indicatorsList[4]?.data }}</div>
          </div>
          <div class="cir-1 flex cir-6">
            {{ indicatorsList[5]?.indicator }}
            <div class="cir-num">{{ indicatorsList[5]?.data }}</div>
          </div>
        </div>
        <div class="bottom-box">
          <div class="flex-top flex">
            <div class="top-box flex">
              <div class="flex-top-1" style="margin-left: 60px;">列表数据</div>
              <div class="flex-1 flex">
                {{ time }}
              </div>
            </div>
          </div>
          <div class="scrow-top flex">
            <div class="scrow-top-item" v-for="(item, index) in colName" :key="index">{{ item }}</div>
          </div>
          <div class="scrow-box">
            <div class="scrow-top flex" v-for="(list, rowIndex) in listArray" :key="rowIndex"
              :style="getTransformStyle()">
              <div class="scrow-item flex" v-for="(listItem, index) in list" :key="index">
                <img src="@/assets/images/sign.png" alt="" v-if="index == 0" />
                {{ listItem }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-col">
        <div class="flex-item">
          <div class="flex-top flex">
            <div class="top-box flex">
              <div class="flex-top-1">{{ dataName[3] || '院前检查人数' }}</div>
              <div class="flex-1 flex">
                {{ time }}
              </div>
            </div>
          </div>
          <div class="flex-con flex">
            {{ selectedTitle }}
          </div>
          <div :id="'main-' + 4" class="main"></div>
        </div>
        <div class="flex-item" style="margin-top: 11px;">
          <div class="flex-top flex">
            <div class="top-box flex">
              <div class="flex-top-1">{{ dataName[4] || '平均住院日' }}</div>
              <div class="flex-1 flex">
                {{ time }}
              </div>
            </div>
          </div>
          <div class="flex-con flex">
            {{ selectedTitle }}
          </div>
          <div :id="'main-' + 5" class="main"></div>
        </div>
        <div class="flex-item" style="margin-top: 11px;">
          <div class="flex-top flex">
            <div class="top-box flex">
              <div class="flex-top-1">{{ dataName[5] || '床位利用率' }}</div>
              <div class="flex-1 flex">
                {{ time }}
              </div>
            </div>
          </div>
          <div class="flex-con flex">
            {{ selectedTitle }}
          </div>
          <div :id="'main-' + 6" class="main"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.page {
  width: 100vw;
  height: 100vh;
  background-color: #000B11;
  overflow: hidden;

  :deep() {
    .pick-data_1 {
      margin-top: 0;
    }
  }

  .top-box {
    width: 90%;
    margin: 0 auto;
    justify-content: space-between;

    .flex-1 {
      flex: 1;
      justify-content: flex-end;
      font-size: 14px;
      color: #1FC6FF;
      font-family: '微软雅黑';

      .btn1 {
        width: 35px !important;
        margin-right: 9px;
      }
    }
  }

  img {
    display: block;
  }

  .page-box {
    margin-top: -130px;
  }

  .title {
    width: 100%;
    height: 181px;
    position: relative;

    .search {
      width: 221px !important;
      height: 382px !important;
      overflow-y: scroll;
      right: 23px !important;

      .day-item {
        width: 184px !important;
        height: 28px;
      }

      .active {
        background: url(@/assets/images/xuan.png) no-repeat !important;
      }
    }

    /* 滚动条整体部分 */
    .search::-webkit-scrollbar {
      width: 0px;
      /* 设置滚动条宽度 */
    }

    .day-box {
      position: absolute;
      top: 31px;
      right: 376px;
      width: 83px;
      padding: 12px 0;
      background: url(@/assets/images/Department_dropdown_menu.png) no-repeat;
      background-size: cover;
      z-index: 99;

      .day-item {
        width: 72px;
        height: 28px;
        text-align: center;
        font-size: 12px;
        line-height: 28px;
        overflow: hidden;
        color: rgb(133, 240, 255, .43);
        margin: 6px auto 0;
        font-family: '微软雅黑';

        &:hover {
          cursor: pointer;
        }
      }

      .active {
        background: url(@/assets/images/Date_selection_effect.png) no-repeat;
        background-size: cover;
        color: #1ED0E8;

        &:hover {
          cursor: pointer;
        }
      }
    }

    .top-img {
      width: 100%;
      height: 181px;
    }

    .title-flex {
      position: absolute;
      top: 8px;
      right: 23px;
      justify-content: flex-end;
      opacity: 1;

      .flex-top-btn {
        width: 82px;
        height: 27px;
        font-size: 12px;
        color: #F0F7FF;
        background: url(@/assets/images/button_1.png) no-repeat;
        background-size: cover;
        text-align: center;
        line-height: 27px;
        font-weight: bold;
        margin-right: 6px;

        &:hover {
          cursor: pointer;
        }

        input {
          width: 100%;
          height: 100%;
          border: none;
          background: transparent;
          color: #F0F7FF;
          text-align: center;
          font-size: 12px;

          &:focus {
            border: none;
            outline: none;
          }
        }

        input[type="text"]::placeholder {
          color: #F0F7FF;
          font-weight: bold;
        }

      }

      .btn1 {
        width: 221px;
        font-weight: bold;
        margin-right: 0;
      }
    }
  }

  .flex-center {
    flex: 1;
    height: calc(100vh - 181px);

    .scrow-top-item {
      flex: 1;
      text-align: center;
      font-size: 12px;
      color: rgba($color: #FFFFFF, $alpha: 0.6);
      padding: 30px 0 15px 0;
    }

    .bottom-box {
      width: 100%;
      background-image: linear-gradient(to bottom, rgba(42, 84, 122, 0), rgba(42, 84, 122, .1), rgba(48, 220, 255, .47));
      font-family: '微软雅黑';

      .scrow-top {
        width: 100%;
        display: flex;
        transition: transform 0.5s ease-in-out;
      }


      .scrow-box {
        width: 100%;
        height: calc(100vh - 760px);
        overflow: hidden;
        font-family: '微软雅黑';

        .scrow-item {
          flex: 1;
          justify-content: center;
          // text-align: center;
          font-size: 12px;
          color: #FFFFFF;
          padding: 15px 0 15px 0;
          box-sizing: border-box;

          img {
            width: 16px;
            height: 16px;
            margin-right: 6px;
            margin-top: 4px;
          }
        }
      }

      /* 滚动条整体部分 */
      .scrow-box::-webkit-scrollbar {
        width: 0px;
        /* 设置滚动条宽度 */
      }

      /* 滚动条的轨道部分 */
      .scrow-box::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* 轨道背景颜色 */
      }

      .flex-top {
        width: 100%;
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        background: url(@/assets/images/subheading.png) no-repeat;
        background-size: cover;
        height: 42px;
        position: relative;
        display: flex;



        .btn1 {
          width: 35px;
          opacity: 0.5;
        }
      }
    }

    .center-box {
      width: 100%;
      height: 510px;
      position: relative;
      justify-content: center;
      margin: 20px 0;

      .cir-1 {
        width: 160px;
        height: 160px;
        position: absolute;
        top: 0;
        left: 15%;
        background: url(@/assets/images/Panelelements.png) no-repeat;
        background-size: cover;
        font-size: 14px;
        color: #CBF2FA;
        justify-content: center;
        flex-direction: column;

        .cir-num {
          font-size: 18px;
          color: #39C9C5;
          font-family: '微软雅黑';
          font-weight: bold;
        }
      }

      .cir-2 {
        top: 186px;
        left: 10%;
      }

      .cir-3 {
        top: 329px;
        left: 22%;
      }

      .cir-4 {
        top: 329px;
        left: 56%;
      }

      .cir-5 {
        top: 170px;
        left: 75%;
      }

      .cir-6 {
        top: 0px;
        left: 65%;
      }

      .cir {
        width: 548px;
        height: 500px;
      }
    }

    .center-title {
      text-align: center;
      font-size: 20px;
      color: #39EBCB;
      width: 100%;
      margin-top: 40px;
      font-family: '微软雅黑';

      span {
        margin-left: 10px;
        font-size: 16px;
        background: -webkit-linear-gradient(90deg, #38E5C7, #DBF9FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
      }
    }
  }

  .flex-col {
    width: 26%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    margin-right: 10px;

    .flex-item {
      .flex-con {
        height: 37px;
        font-size: 14px;
        color: #3CC5F0;
        padding-left: 25px;
        font-weight: bold;
        font-family: '雅黑微软';
      }

      .flex-top {
        width: 100%;
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        background: url(@/assets/images/subheading.png) no-repeat;
        background-size: cover;
        height: 42px;
        position: relative;
        display: flex;

        .flex-top-1 {
          position: absolute;
          top: 2px;
          left: 70px;
        }

        .flex-top-btn {
          width: 82px;
          height: 27px;
          font-size: 12px;
          color: #F0F7FF;
          background: url(@/assets/images/button_1.png) no-repeat;
          background-size: cover;
          text-align: center;
          margin-top: -6px;
          line-height: 27px;

          &:hover {
            cursor: pointer;
          }
        }
      }

      .main {
        width: 100%;
        height: 24.6vh;
        white-space: nowrap;
        background-image: linear-gradient(to bottom, rgba(42, 84, 122, 0), rgba(42, 84, 122, .1), rgba(48, 220, 255, .47));
        /* 防止内容换行 */
      }
    }
  }


}
</style>
